<template></template>

<script setup>
import { ref, onMounted } from 'vue';
import { useUserStore } from '@/stores/user';
import { storeToRefs } from 'pinia';
import { useMap } from '@/stores/useMap.js';
import { getLayerDataHook } from '@/hooks/getLayerDataHook.js';

// 获取store
const { map } = storeToRefs(useMap());
// 为每个图层创建独立的标志变量
const liveRoadFlag0 = ref(false); // 控制图层0的显示状态
const liveRoadFlag1 = ref(false); // 控制图层1的显示状态
const { activeIndex } = storeToRefs(useUserStore());

// 实时路况菜单项点击事件
onMounted(() => {
  // 获取存储的用户信息
  const storedUser = JSON.parse(localStorage.getItem('userName'));
  if (storedUser) {
    activeIndex.value = storedUser.roleCode;
  }

  // 根据用户角色显示不同的图层
  if (activeIndex.value === 0) {
    // 角色0只显示图层1
    getLayerDataHook(liveRoadFlag1, 1, map);
  }

  if (activeIndex.value === 1 || activeIndex.value === 2) {
    // 角色1和2显示两个图层
    getLayerDataHook(liveRoadFlag0, 0, map);
    getLayerDataHook(liveRoadFlag1, 1, map);
  }
});
</script>

<style lang="scss" scoped></style>
